import React from 'react';
import {connect} from 'dva';
import {Row, Col, Form, Input, InputNumber, DatePicker, Select, Button, Modal, Tabs, message} from 'antd';

const R = require('ramda');
import OperatorConstant from "../../../utils/OperatorConstant";
import SingleDragger from "../../commons/SingleDragger";
import ManageSelect from '../../../components/commons/ManageSelect'
import RightBox from "../../../components/commons/RightBox";
import moment from 'moment'
import RightContacts from "../../../utils/RightConstants";
import Constants from "../../../utils/Constants";

const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD';


export default connect(({outbuyProvider}) => ({outbuyProvider}))(
    Form.create({wrappedComponentRef: true})(class EditOutbuy extends React.Component {

        constructor(props) {
            super(props);
            this.state = {
                open: false,
                id: '',
                cstId: '',
                type: '',
                disabled: true,
                attach1: "",
                attach2: "",
                attach3: "",
                attach4: "",
                attach5: ""
            };
        }

        handleOpen = (type, id, disabled, cstId) => {
            this.setState({open: true, type, id, disabled, cstId});
        }

        handleResetFields = () => {
            setTimeout(this.props.form.resetFields, 1001);
        }

        handleCancel = () => {
            this.setState({open: false});
            this.props.form.resetFields();
            this.refs.attach1.resetUpload();
            this.refs.attach2.resetUpload();
            this.refs.attach3.resetUpload();
            this.refs.attach4.resetUpload();
            this.refs.attach5.resetUpload();

            this.props.dispatch({
                type: 'outbuyProvider/refreshState',
                payload: {
                    dataSource: {}
                }
            })
        }


        handleConfirm = (type) => {
            let dataSource = this.props.outbuyProvider.dataSource ? this.props.outbuyProvider.dataSource : "";
            this.props.form.validateFields((errors, values) => {
                if (errors) {
                    return;
                }

                let functionname = "";
                if (this.state.type == "add") {
                    functionname = "addOutbuyProvider";

                } else if (this.state.type == "edit") {
                    functionname = "updateOutbuyProvider";
                }

                if (type == "appvocal") {
                    if (!this.refs.attach1.getUrl()) {
                        message.error("请先上传合作协议");
                        return
                    }
                    ;
                    values.status = "2";
                }

                values.id = this.state.id ? this.state.id : '';
                values.registDate = values.registDate ? values.registDate.format(dateFormat) : "";
                values.registCapital = values.registCapital ? values.registCapital : 0;
                values.attach1 = R.isNil(this.refs.attach1.getUrl()) ? '' : this.refs.attach1.getUrl();
                values.attach2 = R.isNil(this.refs.attach2.getUrl()) ? '' : this.refs.attach2.getUrl();
                values.attach3 = R.isNil(this.refs.attach3.getUrl()) ? '' : this.refs.attach3.getUrl();
                values.attach4 = R.isNil(this.refs.attach4.getUrl()) ? '' : this.refs.attach4.getUrl();
                values.attach5 = R.isNil(this.refs.attach5.getUrl()) ? '' : this.refs.attach5.getUrl();

                this.props.dispatch({
                    type: 'outbuyProvider/' + functionname,
                    payload: {
                        ...values,
                        cstId: this.state.cstId ? this.state.cstId : dataSource.cstId,
                        onSuccess: () => {
                            this.handleCancel();
                            this.props.handleSearch();
                        }
                    }
                });


            })
        };

        handleApproval = () => {
            this.props.form.validateFields((errors, values) => {
                if (errors) {
                    return;
                }
                this.props.dispatch({
                    type: 'outbuyProvider/approvalBuyer',
                    payload: {
                        approvalId: this.state.id,
                        status: values.status,
                        memo: values.memo,
                        onSuccess: () => {
                            this.handleCancel();
                            this.props.handleSearch();
                        }
                    }
                });

            })
        }


        render() {
            const {getFieldDecorator} = this.props.form;
            let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
            let formItemLayout = {
                labelCol: {xs: {span: 24}, sm: {span: 9}},
                wrapperCol: {xs: {span: 24}, sm: {span: 14}}
            };

            const formItemLayout2 = {
                labelCol: {span: 5},
                wrapperCol: {span: 18}
            };

            let module = "outbuy";
            if (!R.isNil(dataSource)) {
                this.state.attach1 = dataSource.attach1;
                this.state.attach2 = dataSource.attach2;
                this.state.attach3 = dataSource.attach3;
                this.state.attach4 = dataSource.attach4;
                this.state.attach5 = dataSource.attach5;
            }

            let footer = [];
            footer.push(<Button key="submit" size="large" type="primary"
                                onClick={this.handleConfirm.bind(this, 'appvocal')}
                                style={{display: this.state.type == "add" || this.state.type == "edit" ? "inline-block" : 'none'}}>保存并提交审核</Button>);
            footer.push(<Button key="save" size="large" onClick={this.handleConfirm.bind(this)}
                                style={{display: this.state.type == "add" || this.state.type == "edit" ? "inline-block" : 'none'}}>保存</Button>);
            footer.push(<Button key="approval" size="large" onClick={this.handleApproval.bind(this)}
                                style={{display: this.state.type == OperatorConstant.approval ? "inline-block" : 'none'}}>审核</Button>);
            footer.push(<Button key="cancel" size="large" onClick={this.handleCancel.bind(this, true)}>取消</Button>);

            let form =
                <Form>
                    <Tabs tabPosition={'top'}>
                        <TabPane tab="基本信息" key="1">
                            <Row>
                                <Col span={22}>
                                    <FormItem
                                        {...formItemLayout2}
                                        label="公司名称"
                                        hasFeedback
                                    >
                                        {getFieldDecorator('name', {
                                            rules: [{
                                                required: true, message: '请填写公司名称！',
                                            }],
                                            initialValue: dataSource.name

                                        })(
                                            <Input disabled={this.state.disabled} maxLength="300"/>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>

                            <Row>
                                <Col span={22}>
                                    <FormItem
                                        {...formItemLayout2}
                                        label="公司地址"
                                        hasFeedback
                                    >
                                        {getFieldDecorator('address', {
                                            rules: [{
                                                required: true, message: '请填写公司地址！',
                                            }],
                                            initialValue: dataSource.address
                                        })(
                                            <Input.TextArea disabled={this.state.disabled} maxLength="500"
                                                            autosize={true}/>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>

                            <Row>
                                <Col span={12}>
                                    <FormItem
                                        {...formItemLayout}
                                        label="公司联系人"
                                        hasFeedback
                                    >
                                        {getFieldDecorator('linkman', {
                                            rules: [{
                                                required: true, message: '请填写公司联系人！',
                                            }],
                                            initialValue: dataSource.linkman
                                        })(
                                            <Input disabled={this.state.disabled} maxLength="100"/>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={12}>
                                    <FormItem
                                        {...formItemLayout}
                                        label="公司联系电话"
                                        hasFeedback
                                    >
                                        {getFieldDecorator('telephone', {
                                            rules: [
                                                {required: true, message: '请填写公司联系电话！'},
                                            ],
                                            initialValue: dataSource.telephone
                                        })(
                                            <Input disabled={this.state.disabled} style={{width: '100%'}} maxLength="50"/>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>

                            <Row>
                                <Col span={12}>
                                    <FormItem
                                        {...formItemLayout}
                                        label="公司邮箱"
                                        hasFeedback
                                    >
                                        {getFieldDecorator('email', {
                                            rules: [
                                                {required: true, message: '请填写公司邮箱！'},
                                                {type: 'email', message: '请填写正确的邮箱',}
                                            ],
                                            initialValue: dataSource.email
                                        })(
                                            <Input disabled={this.state.disabled} maxLength="100"/>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={12}>
                                    <FormItem
                                        {...formItemLayout}
                                        label="公司邮编"
                                        hasFeedback
                                    >
                                        {getFieldDecorator('postalCode', {
                                            validateFirst: true,
                                            rules: [
                                                {required: true, message: '请填写公司邮编！',},
                                                {pattern: /^[1-9][0-9]{5}$/, message: '请正确填写填写公司邮编！',},
                                            ],
                                            initialValue: dataSource.postalCode
                                        })(
                                            <Input disabled={this.state.disabled} style={{width: '100%'}} maxLength="50"/>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>

                            <Row>
                                <Col span={12}>
                                    <FormItem
                                        {...formItemLayout}
                                        label="注册号"
                                        hasFeedback
                                    >
                                        {getFieldDecorator('registNo', {
                                            rules: [{
                                                required: false, message: '请填写注册号！',
                                            }],
                                            initialValue: dataSource.registNo
                                        })(
                                            <Input disabled={this.state.disabled} maxLength="50"/>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={12}>
                                    <FormItem
                                        {...formItemLayout}
                                        label="注册时间"
                                        hasFeedback
                                    >
                                        {getFieldDecorator('registDate', {
                                            rules: [{
                                                required: false, message: '请填写注册时间！',
                                            }],
                                            initialValue: dataSource.registDate ? moment(dataSource.registDate, dateFormat) : undefined
                                        })(
                                            <DatePicker style={{width: '100%'}} disabled={this.state.disabled}/>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>

                            <Row>
                                <Col span={12}>
                                    <FormItem
                                        {...formItemLayout}
                                        label="注册资金(USD)"
                                        hasFeedback
                                    >
                                        {getFieldDecorator('registCapital', {
                                            rules: [{
                                                required: false, message: '请填写注册资金！',
                                            }],
                                            initialValue: dataSource.registCapital ? dataSource.registCapital : undefined
                                        })(
                                            <InputNumber disabled={this.state.disabled} style={{width: '100%'}} maxLength="18"
                                                         placeholder="币种: 美金"/>
                                        )}
                                    </FormItem>
                                </Col>

                                {/*<Col span={12}>*/}
                                {/*    <FormItem*/}
                                {/*        {...formItemLayout}*/}
                                {/*        label="公司形式"*/}
                                {/*        hasFeedback*/}
                                {/*    >*/}
                                {/*        {getFieldDecorator('companyForm', {*/}
                                {/*            rules: [{*/}
                                {/*                required: false, message: '请填写公司形式！',*/}

                                {/*            }],*/}
                                {/*            initialValue: dataSource.companyForm*/}
                                {/*        })(*/}
                                {/*            <Input disabled={this.state.disabled} maxLength="100"/>*/}
                                {/*        )}*/}
                                {/*    </FormItem>*/}
                                {/*</Col>*/}

                            </Row>
                        </TabPane>
                    </Tabs>

                    <Tabs tabPosition={'top'}>
                        <TabPane tab="附件" key="1">
                            <Row>
                                <Col span={12}>
                                    <FormItem {...formItemLayout}
                                              label={<span className="ant-form-item-required">合作协议</span>} hasFeedback>

                                        <SingleDragger url={R.isNil(this.state.attach1) ? '' : this.state.attach1}
                                                       dataSource={dataSource} ref="attach1" module={module}
                                                       disabled={this.state.disabled}/>
                                    </FormItem>
                                </Col>
                                <Col span={12}>
                                    <FormItem {...formItemLayout} label="营业执照" hasFeedback>
                                        <SingleDragger url={R.isNil(this.state.attach2) ? '' : this.state.attach2}
                                                       dataSource={dataSource} ref="attach2" module={module}
                                                       disabled={this.state.disabled}/>

                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={12}>
                                    <FormItem {...formItemLayout} label="买家资信报告" hasFeedback>
                                        <SingleDragger url={R.isNil(this.state.attach3) ? '' : this.state.attach3}
                                                       dataSource={dataSource} ref="attach3" module={module}
                                                       disabled={this.state.disabled}/>

                                    </FormItem>
                                </Col>
                                <Col span={12}>
                                    <FormItem {...formItemLayout} label="其他附件1" hasFeedback>
                                        <SingleDragger url={R.isNil(this.state.attach4) ? '' : this.state.attach4}
                                                       dataSource={dataSource} ref="attach4" module={module}
                                                       disabled={this.state.disabled}/>

                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={12}>
                                    <FormItem {...formItemLayout} label="其他附件2" hasFeedback>
                                        <SingleDragger url={R.isNil(this.state.attach5) ? '' : this.state.attach5}
                                                       dataSource={dataSource} ref="attach5" module={module}
                                                       disabled={this.state.disabled}/>

                                    </FormItem>
                                </Col>
                            </Row>
                        </TabPane>
                    </Tabs>

                    {this.state.type == OperatorConstant.approval || this.state.type == 'approvalView' ?
                        <Tabs tabPosition={'top'}>
                            <TabPane tab="审核" key="1">
                                <Row>
                                    <Col span={12}>
                                        <FormItem
                                            {...formItemLayout}
                                            label="请选择审核结果"
                                            hasFeedback
                                        >
                                            {getFieldDecorator('status', {
                                                rules: [{
                                                    required: true, message: '请选择审核结果！',
                                                }],
                                                initialValue: R.isNil(dataSource.status) || !R.contains(dataSource.status, ["3", "4", "5"]) ? "" : dataSource.status
                                            })(
                                                <Select
                                                    disabled={this.state.type == OperatorConstant.approval ? !this.state.disabled : this.state.disabled}>
                                                    <Option value="3">退回补充资料</Option>
                                                    <Option value="4">审核通过</Option>
                                                    <Option value="5">审核不通过</Option>
                                                </Select>
                                            )}
                                        </FormItem>
                                    </Col>
                                    <Col span={12}>
                                        <FormItem
                                            {...formItemLayout}
                                            label="备注"
                                            hasFeedback
                                        >
                                            {getFieldDecorator('memo', {
                                                rules: [{
                                                    required: this.props.form.getFieldValue('status') == "4" ? false : true,
                                                    message: '请输入备注！',
                                                }],
                                                initialValue: dataSource.approvalMemo
                                            })(
                                                <Input maxLength="100"
                                                       disabled={this.state.type == OperatorConstant.approval ? !this.state.disabled : this.state.disabled}/>
                                            )}
                                        </FormItem>
                                    </Col>
                                </Row>
                            </TabPane>
                        </Tabs>
                        : ""}
                </Form>

            return (
                <span>
                    {this.props.isDetail ? form :

                        <Modal maskClosable={false} visible={this.state.open} title={dataSource.approvalMemo ?
                            <span
                                style={{color: 'red'}}>{`商品供应商详情(审核备注: ${dataSource.approvalMemo})`}</span> : "商品供应商详情"}
                               width={960} footer={footer}
                               wrapClassName="vertical-center-modal" onCancel={this.handleCancel}>
                            {form}
                        </Modal>
                    }
                </span>
            )
        }

    })
)
